---
title: "Invert"
description: "Utilities for applying invert filters to an element."
featureVersion: 'v2.1+'
---

import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = {
  plugin: function () {
    return function ({ addUtilities }) {
      addUtilities({
        '.invert-0': { '--tw-invert': 'invert(0)' },
        '.invert': { '--tw-invert': 'invert(1)' },
      })
    }
  }
}

## Usage

Use the `invert` and `invert-0` utilities alongside the `filter` utility to whether an element should be rendered with inverted colors or normally.

```html
<div class="filter invert ...">
  <!-- ... -->
</div>
```

## Responsive

To control an element's invert filter at a specific breakpoint, add a `{screen}:` prefix to any existing invert utility. For example, use `md:invert-0` to apply the `invert-0` utility at only medium screen sizes and above.

```html
<div class="filter invert **md:invert-0** ...">
  <!-- ... -->
</div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

You can customize which `invert` utilities are generated using the `invert` key in the `theme` section of your `tailwind.config.js` file.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
+     extend: {
+       invert: {
+         25: '.25',
+         50: '.5',
+         75: '.75',
+       }
+     }
    }
  }
```

Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme).

### Variants

<Variants plugin="invert" name="invert" />

### Disabling

<Disabling plugin="invert" name="invert" />
